<template>
  <div class="EditArticle-box">
    <div class="edit-article-header flex-row-start">
      标题:
      <input v-model="art.title" :maxlength="setting.maxTitleLen" :minlength="setting.minTitleLen"></input>
      <div>{{ art.title.length }}/{{ setting.maxTitleLen }}</div>
    </div>

    <WEditor v-model="art.content"></WEditor>

    <div class="edit-article-option flex-row-start">
      <el-form :model="formLabelAlign" label-width="80px" status-icon style="margin-left: 150px">
        <el-form-item label="分类">
          <el-select v-model="option.type" :multiple-limit="3" multiple placeholder="请选择分类" style="width: 80%">
            <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可见">
          <el-select v-model="option.status" placeholder="请选择谁可见">
            <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章封面">
          <MiUpload></MiUpload>
        </el-form-item>
      </el-form>
    </div>
    <div class="edit-article-bottom flex-row-end">
      <el-button size="mini" type="warning" @click="goToArticlePre">预览</el-button>
      <el-button size="mini" type="info" @click="goToArticlePre">草稿箱</el-button>
      <el-button size="mini" type="danger">提交</el-button>
      <el-button size="mini" type="primary" @click="goBack">取消</el-button>
    </div>
  </div>
</template>

<script>
import WEditor from "@/components/editor/WEditor.vue";
import MiUpload from "@/components/Upload/MiUpload.vue";


export default {
  name: "EditArticle",
  components: {MiUpload, WEditor},
  data() {
    return {
      formLabelAlign: {},
      value: "",
      art: {
        title: "测试标题",
        content: "aabbc"
      },
      option: {
        type: "",
        status: ""
      },
      setting: {
        minTitleLen: 1,
        maxTitleLen: 30,
      },
      typeList: [
        {
          label: "猫",
          value: "1"
        },
        {
          label: "狗",
          value: "2"
        },
        {
          label: "沃尔玛购物袋",
          value: "3"
        },
        {
          label: "其他",
          value: "4"
        }
      ],
      statusList: [
        {
          label: "全部可见",
          value: "1"
        },
        {
          label: "仅自己可见",
          value: "2"
        },
        {
          label: "仅粉丝可见",
          value: "3"
        },
        {
          label: "校友可见",
          value: "4"
        }
      ]
    }
  },
  methods: {
    goToArticlePre() {
      this.$router.push({
        name: "article",
        params: {
          article: JSON.stringify(this.art)
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.EditArticle-box {
  .edit-article-header {
    width: 100%;
    margin: 10px 0;

    input {
      font-size: 20px;
      border: none;
      border-bottom: 1px solid black;
      width: 80%;
      text-align: left;
      margin-left: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-bottom: 1px;
      outline: none;

    }
  }

  .edit-article-option {
    width: 100%;
    margin-top: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 30px 0;
  }

  .edit-article-bottom {
    padding-top: 10px;
    width: 100%;
  }
}
</style>